Tugev Ressursside Laadimine Reactis: Veapiiride (Error Boundaries) Valdamine Hookide Abil

Tänapäevastes veebirakendustes on ressursside asünkroonne laadimine tavapärane praktika. Olgu tegemist andmete toomisega API-st, piltide laadimisega või moodulite importimisega, on potentsiaalsete vigade käsitlemine ressursside laadimisel sujuva kasutajakogemuse jaoks ülioluline. Reacti veapiirid (Error Boundaries) pakuvad mehhanismi JavaScripti vigade püüdmiseks mis tahes kohas nende alamkomponentide puus, nende vigade logimiseks ja varu-kasutajaliidese kuvamiseks kogu rakenduse kokkujooksmise asemel. See artikkel uurib, kuidas veapiire koos React Hookidega tõhusalt kasutada ressursside laadimise vigade haldamiseks.

Veapiiride Mõistmine

Enne React 16 versiooni rikkusid käsitsemata JavaScripti vead komponendi renderdamise ajal Reacti sisemise oleku ja põhjustasid järgnevatel renderdamistel krüptilisi vigu. Veapiirid lahendavad selle probleemi, toimides püüdmisplokkidena vigade jaoks, mis tekivad nende alamkomponentides. Need on Reacti komponendid, mis rakendavad ühte või mõlemat järgmistest elutsükli meetoditest:

• static getDerivedStateFromError(error): See staatiline meetod kutsutakse välja pärast seda, kui alamkomponent on vea visanud. See saab argumendina visatud vea ja tagastab väärtuse komponendi oleku uuendamiseks.
• componentDidCatch(error, info): See elutsükli meetod kutsutakse välja pärast seda, kui alamkomponent on vea visanud. See saab argumendina visatud vea, samuti objekti, mis sisaldab teavet selle kohta, milline komponent vea viskas. Saate seda kasutada veateabe logimiseks.

Oluline on märkida, et veapiirid püüavad vigu ainult renderdamise faasis, elutsükli meetodites ja kogu nende all oleva puu konstruktorites. Nad ei püüa vigu:

• Sündmuste käsitlejad (rohkem infot allpool olevas jaotises)
• Asünkroonne kood (nt setTimeout või requestAnimationFrame tagasikutsefunktsioonid)
• Serveripoolne renderdamine
• Veapiiris endas (mitte selle lastes) visatud vead

Veapiirid ja React Hookid: Võimas Kombinatsioon

Kuigi veapiiride rakendamiseks kasutati traditsiooniliselt klassikomponente, pakuvad React Hookid lühemat ja funktsionaalsemat lähenemist. Saame luua korduvkasutatava useErrorBoundary hooki, mis kapseldab veahalduse loogika ja pakub mugavat viisi komponentide mähkimiseks, mis võivad ressursside laadimisel vigu visata.

Kohandatud useErrorBoundary Hooki Loomine

Siin on näide useErrorBoundary hookist:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Selgitus:

• useState: Kasutame useState'i vea oleku haldamiseks. See seab vea esialgu väärtusele null.
• useCallback: Kasutame useCallback'i, et memoiseerida funktsioone resetError ja captureError. See on hea praktika, et vältida tarbetuid uuesti renderdamisi, kui neid funktsioone edastatakse prop'idena.
• ErrorBoundary Komponent: See on funktsionaalne komponent, mis on loodud useCallback'iga ja võtab vastu children ja valikulise fallback prop'i. Kui olekus on viga, renderdab see kas etteantud fallback komponendi või vaikeveateate. Vastasel juhul renderdab see lapsi. See toimib meie veapiirina. Sõltuvuste massiiv `[error]` tagab, et see renderdatakse uuesti, kui `error` olek muutub.
• captureError Funktsioon: Seda funktsiooni kasutatakse vea oleku seadmiseks. Te kutsute seda try...catch plokis ressursside laadimisel.
• resetError Funktsioon: See funktsioon tühjendab vea oleku, võimaldades komponendil oma lapsi uuesti renderdada (potentsiaalselt uuesti proovides ressurssi laadida).

Ressursside Laadimise Rakendamine Veahaldusega

Nüüd vaatame, kuidas seda hooki kasutada ressursside laadimise vigade käsitlemiseks. Vaatleme komponenti, mis toob API-st kasutajaandmeid:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry